<!-- pages/login/login.vue -->
<template>
	<view class="container">
		<view class="input-group">
			<input type="text" placeholder="请输入产品ID" v-model="product_id" />
		</view>
		<view class="input-group">
			<input type="text" placeholder="请输入设备名称" v-model="device_name" />
		</view>
		<view class="input-group">
			<input type="text" placeholder="请输入设备密钥" v-model="key" />
		</view>
		<button @click="submitForm">提交</button>
	</view>
</template>

<script>
	import {
		generateToken
	} from '@/utils/utils.js';

	export default {
		data() {
			return {
				// product_id: '9Vn7kcyL9f',
				// device_name: 'test_pages',
				// key: 'VGlYUndpNjM4THhTR1B0bk9HQlk2NlFSdGNRNkpLWlA=',
				
				// authorization: "version=2018-10-31&res=products%2F9Vn7kcyL9f%2Fdevices%2Ftest_pages&et=1847477604&method=md5&sign=n4FSIwDxYqGqpPLP3TpSYg%3D%3D",
				// user_authorization: "",
				// greeting: '',
				
				product_id: '',
				device_name: '',
				key: '',
				
				
				authorization: '',
				device_status: ''
			};
		},
		methods: {
			submitForm() {




				// 简单的表单验证


				if (this.product_id && this.device_name && this.key) { // 
					const params = {
						et: '1847477604',
						method: 'md5',
						res: 'products/' + this.product_id + '/devices/' + this.device_name,
						version: '2018-10-31'
					};

					this.authorization = generateToken(params, this.key);
					console.log(this.authorization);


					uni.request({
						url: 'https://iot-api.heclouds.com/device/detail',
						"method": "get",
						header: {

							"Accept": "application/json, text/plain, */*",
							"authorization": this.authorization
						},
						data: {
							'product_id': this.product_id,
							'device_name': this.device_name
						},
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('请求成功:', res);
								// 在这里处理返回的数据
								if (res.data.code === 0) { //正常连接了

									if (res.data.data.status === 0)
										this.device_status = '离线'
									else if (res.data.data.status === 1)
										this.device_status = '在线'
									else if (res.data.data.status === 2)
										this.device_status = '未激活'
										
									uni.setStorageSync('userInfo', {
										device_name: this.device_name,
										product_id: this.product_id,
										authorization: this.authorization,
										device_status: this.device_status,
									});
									uni.showToast({
										title: '登录成功',
										icon: 'success',
										duration: 1000 // 持续1秒
									});
									console.log('登录成功'); //可以登录第二个界面
									uni.navigateTo({
										url: '/pages/index/data'
									});
								} else {
									uni.showToast({
										title: '登录失败，原因：' + res.data.msg,
										icon: 'none',
										duration: 3000 // 持续三秒
									});
									console.log('登录失败，原因：', res.data.msg);
								}
							} else {
								console.error('请求失败:', res);
							}
						},
						fail: (err) => {
							console.error('请求失败:', err);
						}
					});

				} else {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.input-group {
		margin-bottom: 10px;
	}

	button {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
	}
	
	.input1 {
	   width: 100%;
  padding: 8px;
  box-sizing: border-box;
	}
</style>